<template>
  <div class="other-settings views-container">
    <div class="wlm-form" v-loading="loading1">
      <div
        class="wlm-form-header"
        style="display:flex;justify-content:space-between;"
      >
       <div>
          <span>分销</span>
         <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time1}}
          <el-button type="text" @click="updatabtn1">更新数据</el-button>
        </span>
       </div>
        <el-select v-model="value1" placeholder="请选择" @change="changebtn1">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="views-container">
        <div id="echart1"></div>
      </div>
    </div>
    <section
      class="flex-row "
      style="display:flex;justify-content:space-between; flex-wrap:wrap;"
    >
      <div class="wlm-form" v-loading="loading2" >
        <div class="wlm-form-header">
          <div style="display:flex;justify-content:space-between;">
           <div>
              <span>分销用户排行榜(下级排行)</span>
              <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
                更新时间：{{data_update_time2}}
                <el-button type="text" @click="updatabtn2">更新数据</el-button>
              </span>
           </div>
          </div>
        </div>
        <div class="views-container">
          <div id="echart2"></div>
        </div>
      </div>
       <div class="wlm-form" v-loading="loading3">
        <div class="wlm-form-header">
          <div style="display:flex;justify-content:space-between;">
          <div>
              <span>分销用户排行榜(下级分销商人数)</span>
         <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time3}}
          <el-button type="text" @click="updatabtn3">更新数据</el-button>
        </span>
          </div>
          </div>
        </div>
        <div class="views-container">
          <div id="echart3"></div>
        </div>
      </div>
       <div class="wlm-form" v-loading="loading4">
        <div class="wlm-form-header">
          <div style="display:flex;justify-content:space-between;">
            <div>
              <span>分销用户排行榜(下级客户)</span>
         <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time4}}
          <el-button type="text" @click="updatabtn4">更新数据</el-button>
        </span>
            </div>
          </div>
        </div>
        <div class="views-container">
          <div id="echart4"></div>
        </div>
      </div>
      <div class="wlm-form" v-loading="loading5">
        <div
        class="wlm-form-header"
        style="display:flex;justify-content:space-between;"
      >
        <div>
           <span>分销商品排行(销售金额)</span>
         <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time5}}
          <el-button type="text" @click="updatabtn5">更新数据</el-button>
        </span>
        </div>
        <el-select v-model="value2" placeholder="请选择" @change="changebtn2">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
        <div class="views-container">
          <div id="echart5"></div>
        </div>
      </div>
      <div class="wlm-form" v-loading="loading6">
        <div
        class="wlm-form-header"
        style="display:flex;justify-content:space-between;"
      >
        <div>
          <span>分销商品排行(销售量)</span>
         <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time6}}
          <el-button type="text" @click="updatabtn6">更新数据</el-button>
        </span>
        </div>
        <el-select v-model="value3" placeholder="请选择" @change="changebtn3">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
        <div class="views-container">
          <div id="echart6"></div>
        </div>
      </div>
      <div class="wlm-form" v-loading="loading7">
        <div
        class="wlm-form-header"
        style="display:flex;justify-content:space-between;"
      >
       <div>
           <span> 分销商品排行(销售单数)</span>
         <span style="color:#999;font-size:10px;margin-left:10px;font-weight: 300;">
          更新时间：{{data_update_time7}}
          <el-button type="text" @click="updatabtn7">更新数据</el-button>
        </span>
       </div>
        <el-select v-model="value4" placeholder="请选择" @change="changebtn4">
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
        <div class="views-container">
          <div id="echart7"></div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { dStatistics,offlineDealerUserOrder,dealerGoodsOrder } from "@/api/basicdata";
export default {
  data() {
    return {
      num1:1,
      num5:1,
      num6:1,
      num7:1,
      data_update_time1:'',
      data_update_time2:'',
      data_update_time3:'',
      data_update_time4:'',
      data_update_time5:'',
      data_update_time6:'',
      data_update_time7:'',
      value1: "1",
      value2: "1",
      value3: "1",
      value4: "1",
      loading1:false,
      loading2:false,
      loading3:false,
      loading4:false,
      loading5:false,
      loading6:false,
      loading7:false,
      options1: [
        {
          value: "1",
          label: "近7日"
        },
        {
          value: "2",
          label: "近一月"
        },
        {
          value: "3",
          label: "近一年"
        }
      ],
      options2: [
        {
          value: "1",
          label: "近7日"
        },
        {
          value: "2",
          label: "近一月"
        },
        {
          value: "3",
          label: "近一年"
        }
      ],
      options3: [
        {
          value: "1",
          label: "近7日"
        },
        {
          value: "2",
          label: "近一月"
        },
        {
          value: "3",
          label: "近一年"
        }
      ],
      options4: [
        {
          value: "1",
          label: "近7日"
        },
        {
          value: "2",
          label: "近一月"
        },
        {
          value: "3",
          label: "近一年"
        }
      ]
    };
  },
  created () {
  },
  mounted() {
    this.drawLine1();
    this.drawLine2();
    this.drawLine3();
    this.drawLine4();
    this.drawLine5();
    this.drawLine6();
    this.drawLine7();
  },
  methods: {
      updatabtn1(){
      this.loading1 = true
      dStatistics({ type: this.num1,update:1 }).then(res => {
          this.loading1 = false
          this.data_update_time1 = res.data.data.data_update_time
            const x = [];
          const series = [
            {
              name: "分销商总数",
              type: "line",
              stack: "分销商总数",
              data: []
            },
            {
              name: "分销客户总数",
              type: "line",
              stack: "分销客户总数",
              data: []
            },
            {
              name: "新增客户数",
              type: "line",
              stack: "新增客户数",
              data: []
            },
            {
              name: "分销总订单数",
              type: "line",
              stack: "分销总订单数",
              data: []
            },
            {
              name: "新增分销订单数",
              type: "line",
              stack: "新增分销订单数",
              data: []
            },
            {
              name: "分销佣金总金额",
              type: "line",
              stack: "分销佣金总金额",
              data: []
            },
            {
              name: "新增分销佣金金额",
              type: "line",
              stack: "新增分销佣金金额",
              data: []
            },
            {
              name: "分销商品销量",
              type: "line",
              stack: "分销商品销量",
              data: []
            },
            {
              name: "分销商品销售金额",
              type: "line",
              stack: "分销商品销售金额",
              data: []
            },
            {
              name: "分销提现申请金额",
              type: "line",
              stack: "分销提现申请金额",
              data: []
            },
            {
              name: "分销提现已打款金额",
              type: "line",
              stack: "分销提现已打款金额",
              data: []
            },
            {
              name: "分销提现申请手续费",
              type: "line",
              stack: "分销提现申请手续费",
              data: []
            },
            {
              name: "分销提现已打款手续费",
              type: "line",
              stack: "分销提现已打款手续费",
              data: []
            }
          ];
           let dealerNumberSum = Object.values(res.data.data.dealerNumberSum);
           let customerNumber = Object.values(res.data.data.customerNumber);
           let newCustomerNumber = Object.values(res.data.data.newCustomerNumber);
           let dealerOrderNumber = Object.values(res.data.data.dealerOrderNumber);
           let newDealerOrderNumber = Object.values(res.data.data.newDealerOrderNumber);
           let dealerOrderCommission = Object.values(res.data.data.dealerOrderCommission);
           let newDealerOrderCommission = Object.values(res.data.data.newDealerOrderCommission);
           let dealerGoodsSale = Object.values(res.data.data.dealerGoodsSale);
           let dealerGoodsPayPrice = Object.values(res.data.data.dealerGoodsPayPrice);
           let txDealerMoney = Object.values(res.data.data.txDealerMoney);
           let txDealerMoney40 = Object.values(res.data.data.txDealerMoney40);
           let txDealerCommission = Object.values(res.data.data.txDealerCommission);
           let txDealerCommission40 = Object.values(res.data.data.txDealerCommission40);
             dealerNumberSum.forEach(res => {
            x.push(res.date);
            series[0].data.push(res.value);
          });
           customerNumber.forEach(res => {
            series[1].data.push(res.value);
          });
           newCustomerNumber.forEach(res => {
            series[2].data.push(res.value);
          });
           dealerOrderNumber.forEach(res => {
            series[3].data.push(res.value);
          });
           newDealerOrderNumber.forEach(res => {
            series[4].data.push(res.value);
          });
           dealerOrderCommission.forEach(res => {
            series[5].data.push(res.value);
          });
           newDealerOrderCommission.forEach(res => {
            series[6].data.push(res.value);
          });
           dealerGoodsSale.forEach(res => {
            series[7].data.push(res.value);
          });
           dealerGoodsPayPrice.forEach(res => {
            series[8].data.push(res.value);
          });
           txDealerMoney.forEach(res => {
            series[9].data.push(res.value);
          });
           txDealerMoney40.forEach(res => {
            series[10].data.push(res.value);
          });
           txDealerCommission.forEach(res => {
            series[11].data.push(res.value);
          });
           txDealerCommission40.forEach(res => {
            series[12].data.push(res.value);
          });
        const myEchart = this.$echarts.init(
          document.getElementById("echart1"),
          "macarons"
        );
        myEchart.setOption({
          tooltip: {
            trigger: "axis"
          },
          legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: ['分销商总数','分销客户总数','新增客户数','分销总订单数','新增分销订单数','分销佣金总金额','新增分销佣金金额','分销商品销量','分销商品销售金额',
              '分销提现申请金额','分销提现已打款金额','分销提现申请手续费','分销提现已打款手续费'],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
        });
      });
    },
    updatabtn2(){
       this.loading2 = true
        offlineDealerUserOrder({class:1,update:1}).then(res=>{
            console.log("111111111111111",res)
            if(res.data.code==1){
                this.loading2 = false
                this.data_update_time2 = res.data.data.data_update_time
                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 30,
            }
          ];
          let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
            res.data.data.forEach(item => {
            x.push(item.nickName);
            //   console.log("sfffffffff",myEchart.setOption.series)
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart2"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse: true,//倒叙
            },
            series: series
          });
            }
        })
    },
    updatabtn3(){
  this.loading3 = true
        offlineDealerUserOrder({class:2,update:1}).then(res=>{
            console.log("111111111111111",res)
            if(res.data.code==1){
                this.loading3 = false
                this.data_update_time3 = res.data.data.data_update_time
                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 30,
            }
          ];
            let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
            res.data.data.forEach(item => {
            x.push(item.nickName);
            //   console.log("sfffffffff",myEchart.setOption.series)
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart3"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse: true,//倒叙
            },
            series: series
          });
            }
        })
    },
    updatabtn4(){
this.loading4 = true
        offlineDealerUserOrder({class:3,update:1}).then(res=>{
            console.log("111111111111111",res)
            if(res.data.code==1){
                this.loading4 = false
                this.data_update_time4 = res.data.data.data_update_time
                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 30,
            }
          ];
             let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
            res.data.data.forEach(item => {
            x.push(item.nickName);
            //   console.log("sfffffffff",myEchart.setOption.series)
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart4"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse: true,//倒叙
            },
            series: series
          });
            }
        })
    },
    updatabtn5(){
      this.loading5 = true
        dealerGoodsOrder({type:this.num5,class:1,update:1}).then(res=>{
            if(res.data.code==1){
                this.loading5 = false
                this.data_update_time5 = res.data.data.data_update_time
                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 20,
            }
          ];
          let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
            res.data.data.forEach(item => {
           item.goods_name = item.goods_name.substr(0,10);
            x.push(item.goods_name);
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart5"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse:true,
            },
            series: series
          });
            }
        })
    },
    updatabtn6(){
      this.loading6 = true
      dealerGoodsOrder({type:this.num6,class:2,update:1}).then(res=>{
          if(res.data.code==1){
                this.loading6 = false
                this.data_update_time6 = res.data.data.data_update_time
                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 20,
            }
          ];
          let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
            res.data.data.forEach(item => {
           item.goods_name = item.goods_name.substr(0,10);
            x.push(item.goods_name);
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart6"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse:true,
            },
            series: series
          });
            }
      })
          
    },
    updatabtn7(){
this.loading7 = true
      dealerGoodsOrder({type:this.num7,class:3,update:1}).then(res=>{
          if(res.data.code==1){
                this.loading7 = false
                this.data_update_time7 = res.data.data.data_update_time
                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 20,
            }
          ];
            let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
            res.data.data.forEach(item => {
           item.goods_name = item.goods_name.substr(0,10);
            x.push(item.goods_name);
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart7"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse:true,
            },
            series: series
          });
            }
      })
    },
      changebtn4(event){
          this.loading7 = true
          this.num7= event
      dealerGoodsOrder({type:event,class:3}).then(res=>{
          if(res.data.code==1){
                this.loading7 = false
                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 20,
            }
          ];
            res.data.data.forEach(item => {
           item.goods_name = item.goods_name.substr(0,10);
            x.push(item.goods_name);
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart7"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse:true,
            },
            series: series
          });
            }
      })
      },
      changebtn3(event){
          this.loading6 = true
          this.num6 = event
      dealerGoodsOrder({type:event,class:2}).then(res=>{
          if(res.data.code==1){
                this.loading6 = false
                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 20,
            }
          ];
            res.data.data.forEach(item => {
           item.goods_name = item.goods_name.substr(0,10);
            x.push(item.goods_name);
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart6"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse:true,
            },
            series: series
          });
            }
      })
      },
      changebtn2(event){
          this.loading5 = true
          this.num5 = event
        dealerGoodsOrder({type:event,class:1}).then(res=>{
            if(res.data.code==1){
                this.loading5 = false
                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 20,
            }
          ];
            res.data.data.forEach(item => {
           item.goods_name = item.goods_name.substr(0,10);
            x.push(item.goods_name);
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart5"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse:true,
            },
            series: series
          });
            }
        })
      },
      changebtn1(event){
        this.loading1 = true
        this.num1 = event
      dStatistics({ type: event }).then(res => {
          this.loading1 = false
            const x = [];
          const series = [
            {
              name: "分销商总数",
              type: "line",
              stack: "分销商总数",
              data: []
            },
            {
              name: "分销客户总数",
              type: "line",
              stack: "分销客户总数",
              data: []
            },
            {
              name: "新增客户数",
              type: "line",
              stack: "新增客户数",
              data: []
            },
            {
              name: "分销总订单数",
              type: "line",
              stack: "分销总订单数",
              data: []
            },
            {
              name: "新增分销订单数",
              type: "line",
              stack: "新增分销订单数",
              data: []
            },
            {
              name: "分销佣金总金额",
              type: "line",
              stack: "分销佣金总金额",
              data: []
            },
            {
              name: "新增分销佣金金额",
              type: "line",
              stack: "新增分销佣金金额",
              data: []
            },
            {
              name: "分销商品销量",
              type: "line",
              stack: "分销商品销量",
              data: []
            },
            {
              name: "分销商品销售金额",
              type: "line",
              stack: "分销商品销售金额",
              data: []
            },
            {
              name: "分销提现申请金额",
              type: "line",
              stack: "分销提现申请金额",
              data: []
            },
            {
              name: "分销提现已打款金额",
              type: "line",
              stack: "分销提现已打款金额",
              data: []
            },
            {
              name: "分销提现申请手续费",
              type: "line",
              stack: "分销提现申请手续费",
              data: []
            },
            {
              name: "分销提现已打款手续费",
              type: "line",
              stack: "分销提现已打款手续费",
              data: []
            }
          ];
           let dealerNumberSum = Object.values(res.data.data.dealerNumberSum);
           let customerNumber = Object.values(res.data.data.customerNumber);
           let newCustomerNumber = Object.values(res.data.data.newCustomerNumber);
           let dealerOrderNumber = Object.values(res.data.data.dealerOrderNumber);
           let newDealerOrderNumber = Object.values(res.data.data.newDealerOrderNumber);
           let dealerOrderCommission = Object.values(res.data.data.dealerOrderCommission);
           let newDealerOrderCommission = Object.values(res.data.data.newDealerOrderCommission);
           let dealerGoodsSale = Object.values(res.data.data.dealerGoodsSale);
           let dealerGoodsPayPrice = Object.values(res.data.data.dealerGoodsPayPrice);
           let txDealerMoney = Object.values(res.data.data.txDealerMoney);
           let txDealerMoney40 = Object.values(res.data.data.txDealerMoney40);
           let txDealerCommission = Object.values(res.data.data.txDealerCommission);
           let txDealerCommission40 = Object.values(res.data.data.txDealerCommission40);
             dealerNumberSum.forEach(res => {
            x.push(res.date);
            series[0].data.push(res.value);
          });
           customerNumber.forEach(res => {
            series[1].data.push(res.value);
          });
           newCustomerNumber.forEach(res => {
            series[2].data.push(res.value);
          });
           dealerOrderNumber.forEach(res => {
            series[3].data.push(res.value);
          });
           newDealerOrderNumber.forEach(res => {
            series[4].data.push(res.value);
          });
           dealerOrderCommission.forEach(res => {
            series[5].data.push(res.value);
          });
           newDealerOrderCommission.forEach(res => {
            series[6].data.push(res.value);
          });
           dealerGoodsSale.forEach(res => {
            series[7].data.push(res.value);
          });
           dealerGoodsPayPrice.forEach(res => {
            series[8].data.push(res.value);
          });
           txDealerMoney.forEach(res => {
            series[9].data.push(res.value);
          });
           txDealerMoney40.forEach(res => {
            series[10].data.push(res.value);
          });
           txDealerCommission.forEach(res => {
            series[11].data.push(res.value);
          });
           txDealerCommission40.forEach(res => {
            series[12].data.push(res.value);
          });
        const myEchart = this.$echarts.init(
          document.getElementById("echart1"),
          "macarons"
        );
        myEchart.setOption({
          tooltip: {
            trigger: "axis"
          },
          legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: ['分销商总数','分销客户总数','新增客户数','分销总订单数','新增分销订单数','分销佣金总金额','新增分销佣金金额','分销商品销量','分销商品销售金额',
              '分销提现申请金额','分销提现已打款金额','分销提现申请手续费','分销提现已打款手续费'],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
        });
      });
      },
    //分销统计图
    drawLine1() {
        this.loading1 = true
      dStatistics({ type: 1 }).then(res => {
          this.loading1 = false
          this.data_update_time1 = res.data.data.data_update_time
            const x = [];
          const series = [
            {
              name: "分销商总数",
              type: "line",
              stack: "分销商总数",
              data: []
            },
            {
              name: "分销客户总数",
              type: "line",
              stack: "分销客户总数",
              data: []
            },
            {
              name: "新增客户数",
              type: "line",
              stack: "新增客户数",
              data: []
            },
            {
              name: "分销总订单数",
              type: "line",
              stack: "分销总订单数",
              data: []
            },
            {
              name: "新增分销订单数",
              type: "line",
              stack: "新增分销订单数",
              data: []
            },
            {
              name: "分销佣金总金额",
              type: "line",
              stack: "分销佣金总金额",
              data: []
            },
            {
              name: "新增分销佣金金额",
              type: "line",
              stack: "新增分销佣金金额",
              data: []
            },
            {
              name: "分销商品销量",
              type: "line",
              stack: "分销商品销量",
              data: []
            },
            {
              name: "分销商品销售金额",
              type: "line",
              stack: "分销商品销售金额",
              data: []
            },
            {
              name: "分销提现申请金额",
              type: "line",
              stack: "分销提现申请金额",
              data: []
            },
            {
              name: "分销提现已打款金额",
              type: "line",
              stack: "分销提现已打款金额",
              data: []
            },
            {
              name: "分销提现申请手续费",
              type: "line",
              stack: "分销提现申请手续费",
              data: []
            },
            {
              name: "分销提现已打款手续费",
              type: "line",
              stack: "分销提现已打款手续费",
              data: []
            }
          ];
           let dealerNumberSum = Object.values(res.data.data.dealerNumberSum);
           let customerNumber = Object.values(res.data.data.customerNumber);
           let newCustomerNumber = Object.values(res.data.data.newCustomerNumber);
           let dealerOrderNumber = Object.values(res.data.data.dealerOrderNumber);
           let newDealerOrderNumber = Object.values(res.data.data.newDealerOrderNumber);
           let dealerOrderCommission = Object.values(res.data.data.dealerOrderCommission);
           let newDealerOrderCommission = Object.values(res.data.data.newDealerOrderCommission);
           let dealerGoodsSale = Object.values(res.data.data.dealerGoodsSale);
           let dealerGoodsPayPrice = Object.values(res.data.data.dealerGoodsPayPrice);
           let txDealerMoney = Object.values(res.data.data.txDealerMoney);
           let txDealerMoney40 = Object.values(res.data.data.txDealerMoney40);
           let txDealerCommission = Object.values(res.data.data.txDealerCommission);
           let txDealerCommission40 = Object.values(res.data.data.txDealerCommission40);
             dealerNumberSum.forEach(res => {
            x.push(res.date);
            series[0].data.push(res.value);
          });
           customerNumber.forEach(res => {
            series[1].data.push(res.value);
          });
           newCustomerNumber.forEach(res => {
            series[2].data.push(res.value);
          });
           dealerOrderNumber.forEach(res => {
            series[3].data.push(res.value);
          });
           newDealerOrderNumber.forEach(res => {
            series[4].data.push(res.value);
          });
           dealerOrderCommission.forEach(res => {
            series[5].data.push(res.value);
          });
           newDealerOrderCommission.forEach(res => {
            series[6].data.push(res.value);
          });
           dealerGoodsSale.forEach(res => {
            series[7].data.push(res.value);
          });
           dealerGoodsPayPrice.forEach(res => {
            series[8].data.push(res.value);
          });
           txDealerMoney.forEach(res => {
            series[9].data.push(res.value);
          });
           txDealerMoney40.forEach(res => {
            series[10].data.push(res.value);
          });
           txDealerCommission.forEach(res => {
            series[11].data.push(res.value);
          });
           txDealerCommission40.forEach(res => {
            series[12].data.push(res.value);
          });
        const myEchart = this.$echarts.init(
          document.getElementById("echart1"),
          "macarons"
        );
        myEchart.setOption({
          tooltip: {
            trigger: "axis"
          },
          legend: {
              // 图例组件，颜色和名字
              // right: '10%',
              // top: '30%',
              itemGap: 16,
              itemWidth: 18,
              itemHeight: 10,
              data: ['分销商总数','分销客户总数','新增客户数','分销总订单数','新增分销订单数','分销佣金总金额','新增分销佣金金额','分销商品销量','分销商品销售金额',
              '分销提现申请金额','分销提现已打款金额','分销提现申请手续费','分销提现已打款手续费'],
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },

            xAxis: {
              type: "category",
              data: x,
              boundaryGap: false
            },
            yAxis: {
              type: "value"
            },
            series: series
        });
      });
    },
    // class=1
    drawLine2(){
        this.loading2 = true
        offlineDealerUserOrder({class:1}).then(res=>{
            console.log("111111111111111",res)
            if(res.data.code==1){
                this.loading2 = false
                this.data_update_time2 = res.data.data.data_update_time
                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 30,
            }
          ];
          let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
            res.data.data.forEach(item => {
            x.push(item.nickName);
            //   console.log("sfffffffff",myEchart.setOption.series)
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart2"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse: true,//倒叙
            },
            series: series
          });
            }
        })
    },
    // class=2
    drawLine3(){
        this.loading3 = true
        offlineDealerUserOrder({class:2}).then(res=>{
            console.log("111111111111111",res)
            if(res.data.code==1){
                this.loading3 = false
                this.data_update_time3 = res.data.data.data_update_time
                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 30,
            }
          ];
            let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
            res.data.data.forEach(item => {
            x.push(item.nickName);
            //   console.log("sfffffffff",myEchart.setOption.series)
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart3"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse: true,//倒叙
            },
            series: series
          });
            }
        })
    },
    // class=3
    drawLine4(){
        this.loading4 = true
        offlineDealerUserOrder({class:3}).then(res=>{
            console.log("111111111111111",res)
            if(res.data.code==1){
                this.loading4 = false
                this.data_update_time4 = res.data.data.data_update_time

                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 30,
            }
          ];
             let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
            res.data.data.forEach(item => {
            x.push(item.nickName);
            //   console.log("sfffffffff",myEchart.setOption.series)
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart4"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse: true,//倒叙
            },
            series: series
          });
            }
        })
    },
    drawLine5(){
        this.loading5 = true
        dealerGoodsOrder({type:1,class:1}).then(res=>{
            if(res.data.code==1){
                this.loading5 = false
                this.data_update_time5 = res.data.data.data_update_time
                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 20,
            }
          ];
          let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
            res.data.data.forEach(item => {
           item.goods_name = item.goods_name.substr(0,10);
            x.push(item.goods_name);
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart5"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse:true,
            },
            series: series
          });
            }
        })
    },
    drawLine6(){
      this.loading6 = true
      dealerGoodsOrder({type:1,class:2}).then(res=>{
          if(res.data.code==1){
                this.loading6 = false
                this.data_update_time6 = res.data.data.data_update_time
                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 20,
            }
          ];
          let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
            res.data.data.forEach(item => {
           item.goods_name = item.goods_name.substr(0,10);
            x.push(item.goods_name);
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart6"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse:true,
            },
            series: series
          });
            }
      })
          
    },
    drawLine7(){
        this.loading7 = true
      dealerGoodsOrder({type:1,class:3}).then(res=>{
          if(res.data.code==1){
                this.loading7 = false
                this.data_update_time7 = res.data.data.data_update_time
                  const x = [];
          const series = [
            {
              type: "bar",
              data: [],
              barWidth: 20,
            }
          ];
            let data_update_time = res.data.data.data_update_time;
            delete res.data.data.data_update_time;
            res.data.data = Object.values(res.data.data)
            res.data.data.forEach(item => {
           item.goods_name = item.goods_name.substr(0,10);
            x.push(item.goods_name);
            series[0].data.push(item.value);
          });
          const myEchart = this.$echarts.init(
            document.getElementById("echart7"),
            "macarons"
          );
          myEchart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: []
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: "category",
              data: x,
              inverse:true,
            },
            series: series
          });
            }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
#echart1 {
  width: 95%;
  height: 500px;
}
#echart2 {
  width: 760px;
  height: 480px;
}
#echart3 {
  width: 760px;
  height: 480px;
}
#echart4 {
  width: 760px;
  height: 480px;
}
#echart5 {
  width: 760px;
  height: 480px;
}
#echart6 {
  width: 760px;
  height: 480px;
}
#echart7 {
  width: 760px;
  height: 480px;
}
</style>
